<template>
  <div class="xtx-infinite-loading" ref="container">
    <!-- 正在加载数据时显示 -->
    <div class="loading" v-if="isLoading">
      <span class="img"></span>
      <span class="text">正在加载...</span>
    </div>
    <!-- 数据全部加载完毕时显示 -->
    <div class="none" v-if="isFinished">
      <span class="text">亲，没有更多了</span>
    </div>
  </div>
</template>

<script>
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export default ({
  name: 'XtxInfiniteLoad',
  props: {
    isFinished: { type: Boolean },
    isLoading: { type: Boolean }
  },
  emits: ['load'], // 便于维护
  setup (props, { emit }) {
    const container = ref(null)
    // stop是一个可执行的函数 用来手动停止监听函数
    // 不管元素进入还是离开视口区域都不会再执行回调函数
    useIntersectionObserver(
    // 监听目标元素
      container,
      ([{ isIntersecting }], observerElement) => {
      // isIntersecting: 当前监听的元素是否成功进入到视口区域 如果进来了就是true 否则就是false
      // observerElement 被观察的dom
      // console.log(isIntersecting)
      // 有了一个判断是否进入视口区域的条件 如果是true  代表进入了视口区域 发起请求
        if (isIntersecting) {
          // 可能随着业务的不同 调用接口的方法也不同
          console.log('加载更多组件进入视口了')
          //   通知父组件 可以加载下一页数据
          //   只有与后端还有数据 并且上一次的加载状态已经结束了  才可以进行load事件触发
          if (props.isFinished === false && props.isLoading === false) {
            //   当isFinished等于false才表示可以加载
            emit('load')
          }
        }
      // 监听处理不是只一次进行的 每次进入移除视口都会再次执行回调  所以需要手动关闭
      },
      // 进入可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
      { threshold: 0 }
    )

    return {
      container
    }
  }
})
</script>

<style scoped lang='less'>
.xtx-infinite-loading {
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    .img {
      width: 50px;
      height: 50px;
      background: url(../../assets/images/load.gif) no-repeat center / contain;
    }
    .text {
      color: #999;
      font-size: 16px;
    }
  }
  .none {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    .text {
      color: #999;
      font-size: 16px;
    }
  }
}
</style>
